<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <!--<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />-->
    <!-- this is for mobile (Android) Chrome -->
    <!--<meta name="viewport" content="initial-scale=1.0, width=device-height">-->
    <!--  mobile Safari, FireFox, Opera Mobile  -->
    <script src="/amodernizr.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/aflashcanvas.js"></script>
    <![endif]-->
    <style type="text/css">
        /*div {
            margin-top: 1em;
            margin-bottom: 1em;
        }*/

        input {
            padding: .5em;
            margin: .5em;
        }

        select {
            padding: .5em;
            margin: .5em;
        }

        #signatureparent {
            color: #000;
            background-color: #fff;
            /*max-width:600px;*/
            padding: 10px;
            width: 100%;
        }
        /*This is the div within which the signature canvas is fitted*/

        #signature {
            border: 1px dotted #3eaed2;
            background-color: #ececec;
            height: 200px;
            width: 100%;
        }
        /* Drawing the 'gripper' for touch-enabled devices */

        html.touch #content {
            float: left;
            width: 92%;
        }

        /*html.touch #scrollgrabber {
            float: right;
            width: 4%;
            margin-right: 2%;
            background-image: url()
        }*/

        html.borderradius #scrollgrabber {
            border-radius: 1em;
        }
        .signature .jSignature{height: 100%;}
    </style>
</head>
<body style="background-color: #fff;">
<div id="content" style="width: 100%;">
    <p>说明：
        服务器端用的thinkphp，这里只是个控制器，单独使用无效的，
        如果不知道控制器该放在什么位置，请自行百度。自行拼接请求服务器的完整的网址。
    </p>
    <p style="padding-left: 10px;margin-top:10px;margin-bottom: 5px;">请在虚线框内签名，完毕后点击“保存”。</p>
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <div style="text-align: center;">
        <input type="button" name="btnReset" id="btnReset" value="重写" />
        <input type="submit" class="" name="btnSave" id="btnSave"  value="保存签名" />
    </div>
</div>
<script src="/ajquery1.10.2.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script>
    /*  @preserve
    jQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org)
    Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
    Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
    http://dojofoundation.org/license for more information.
    */
    (function($) {
        var topics = {};
        $.publish = function(topic, args) {
            if(topics[topic]) {
                var currentTopic = topics[topic],
                    args = args || {};

                for(var i = 0, j = currentTopic.length; i < j; i++) {
                    currentTopic[i].call($, args);
                }
            }
        };
        $.subscribe = function(topic, callback) {
            if(!topics[topic]) {
                topics[topic] = [];
            }
            topics[topic].push(callback);
            return {
                "topic": topic,
                "callback": callback
            };
        };
        $.unsubscribe = function(handle) {
            var topic = handle.topic;
            if(topics[topic]) {
                var currentTopic = topics[topic];

                for(var i = 0, j = currentTopic.length; i < j; i++) {
                    if(currentTopic[i] === handle.callback) {
                        currentTopic.splice(i, 1);
                    }
                }
            }
        };
    })(jQuery);
</script>
<script src="/ajSignature.min.noconflict.js"></script>
<script>
    (function($) {

        $(document).ready(function() {

            // This is the part where jSignature is initialized.
            var $sigdiv = $("#signature").jSignature({
                    'UndoButton': false
                }),
                // All the code below is just code driving the demo.
                $tools = $('#tools'),
                $extraarea = $('#displayarea'),
                pubsubprefix = 'jSignature.demo.'

            var export_plugins = $sigdiv.jSignature('listPlugins', 'export');

            $("#btnSave").on("click",function(){
                //可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
                var basedata = "data:"+$sigdiv.jSignature('getData', "image");
//						console.log("basedata:"+basedata);
//						$(".signResult").html(data);
                //server是我自定义的，值为http://www.abc.com/index.php?g=user&m=jk
                //这样就能拼接完整的请求路径了。
                var weburl=server+"&a=make_sign";
                var jsdata={imgbase:basedata};
                $.ajax({
                    type:"post",
                    url:weburl,
                    async:true,
                    data:jsdata,
                    dataType:"json",
                    success:function(data){
                        console.log(JSON.stringify(data));
                        if(data.success){
                            console.log(data.msg);
                        }
                        else{
                            console.log(data.msg);
                        }
                    }
                });
//						if(data.length<100){
                //本来这里想判断是否为空的，发现什么都不写时，竟然也有数据，应该是底板的编码了
//							mui.toast("请重新签名");
//						}
            });
            $("#btnReset").on("click",function(){
                $sigdiv.jSignature('reset');
            });
        })
    })(jQuery)
</script>
</body>

</html>